<template>
 <!-- <a-modal
    :title="title"
    :width="1000"
    :visible="visible"
    :confirmLoading="confirmLoading"
    :footer="null"
    @cancel="handleCancel"
    cancelText="关闭">-->
    <j-modal
      :visible.sync="visible"
      :width="1200"
      :title="title"
      :footer="null"
      @cancel="handleCancel"
      :fullscreen.sync="fullscreen"
      :switchFullscreen="switchFullscreen"
    >

    <a-tabs default-active-key="1">
      <a-tab-pane key="1" tab="审批意见">

        <table  v-html="doHtml"  style="margin-top: 10px;">
        </table>

        <local-file @delCheckFun="delCheckFun" ref="localFile" v-show="fileShow"></local-file>

        <div >
          <br/>
          <br/>
          <a-textarea  v-model="OPINION" placeholder="请输入审批意见" :rows="4"/>
          <a-button style="margin: 20px" type="primary" @click="handle('yes')">批准</a-button>
          <a-button  @click="handle('no')">驳回</a-button>
        </div>

      </a-tab-pane>

      <a-tab-pane key="2" tab="审批记录" force-render>
      <div style="overflow-x: auto;-webkit-overflow-scrolling:touch;">

             <img style="width:85%" v-bind:alt="FILENAME" v-bind:src="imgSrc">
              </div>
        <div>
          <table style="margin-top: 10px;">
            <tr>
                <th style="width:200px;">流程</th>
                 <th style="width:200px;">审批日期</th>
              <!-- <th style="width:50px;">步骤</th> -->

              <th style="width:200px;">经办人</th>
              <!-- <th style="width:150px;">审批开始时间</th> -->

              <!-- <th style="width:120px;">用时</th> -->
              <th>审批意见</th>
            </tr>
            <template v-for="(data,index) in hitaskList">

              <tr v-if="data.ACT_NAME_ != null">
                <!-- <td style="width: 30px;text-align: center;">{{index+1}}</td> -->
                <td style="padding-top: 10px;">{{data.ACT_NAME_}}</td>

                  <td style="padding-top: 10px;">
                  <template v-if="null == data.END_TIME_">正在审批……</template>
                  <template v-if="null != data.END_TIME_">{{data.END_TIME_}}</template>
                </td>
                                <td style="padding-top: 10px;">{{data.ASSIGNEE_}}</td>
                <!-- <td style="padding-top: 10px;">{{data.START_TIME_}}</td> -->

                <!-- <td style="padding-top: 10px;">{{data.ZTIME}}</td> -->
                <td style="padding-top: 10px;">{{data.TEXT_}}</td>
              </tr>
            </template>
          </table>
        </div>


      </a-tab-pane>

    </a-tabs>


  </j-modal>
</template>

<script>
  import { httpAction, postAction, getAction } from '@/api/manage'
  import pick from 'lodash.pick'
  import moment from 'moment'
  import LocalFile from '../../modules/oss/LocalFile'

  export default {
    name: 'RuTaskHandle',
    components: { LocalFile },
    data() {
      return {
        title: '操作',
        visible: false,
        confirmLoading: false,
        doHtml: '',

        fkId:'',
        fileShow:false,

        fullscreen: false,
        switchFullscreen: true,

        hitaskList: [],			//历史任务节点列表
        varList: [],			//流程变量列表
        PROC_INST_ID_: '',		//流程实例ID
        ID_: '',				//任务ID
        OPINION: '',			//审批意见
        ASSIGNEE_: '',			//待办人
        COPYTOER: '',			//抄送对象
        CREMARKS: '',			//抄送备注说明
        messagetext: '',		//作废缘由
        FILENAME: '',			//流程图文件名ID
        imgSrc: '',				//流程图base64数据
        Reject: false,			//驳回按钮权限
        Abolish: false,			//作废按钮权限
        NextASSIGNEE_: false,	//指定下一办理人按钮权限
        msg: true,				//判断是否从办理任务进入
        CONNULL: false,			//判断是否输入文本
        loading: false			//加载状态


      }
    },
    created() {
    },
    methods: {

      open(record) {
        console.log(record)
        this.PROC_INST_ID_ = record.PROC_INST_ID_
        this.ID_ = record.ID_
        this.FILENAME = record.DGRM_RESOURCE_NAME_
        this.ASSIGNEE_ = record.ASSIGNEE_
        this.visible = true
        this.getData()
      },

      //进入页面获取数据
      getData: function() {
        this.loading = true
        //发送 post 请求
        let data = { PROC_INST_ID_: this.PROC_INST_ID_, ID_: this.ID_, FILENAME: this.FILENAME }
        postAction('/rutask/getHandleData', data).then((res) => {
          if ('success' == res.result) {
            console.log(res)
            this.hitaskList = res.hitaskList

            this.varList = res.varList
            this.dohtml(this.varList)

            this.showFile(res.list)

            this.imgSrc = res.imgSrc
            this.loading = false
          } else if ('exception' == res.result) {
            showException('待办任务', res.exception)//显示异常
          }
          this.loading = false
        })


      },


      close() {
        this.$emit('close')
        this.visible = false
        this.hitaskList = []			//历史任务节点列表
        this.varList = []			//流程变量列表
        this.PROC_INST_ID_ = ''		//流程实例ID
        this.ID_ = ''			//任务ID
        this.OPINION = ''			//审批意见
        this.doHtml=''
        this.fileShow=false
        this.$refs.localFile.fk=''
      },

      handleCancel() {
        this.close()
      },


      //办理任务
      handle: function(msg) {

        //发送 post 请求
        let data = {
          msg: msg,
          ID_: this.ID_,
          ASSIGNEE_: this.ASSIGNEE_,
          PROC_INST_ID_: this.PROC_INST_ID_,
          OPINION: this.OPINION,
          COPYTOER: this.COPYTOER,
          CREMARKS: this.CREMARKS
        }
        postAction('rutask/handle', data).then((res) => {
          if ('success' == res.result) {
            this.$message.success('审批完成')
          } else {
            this.$message.warning('提交审批异常')//显示异常
          }
          this.loading = false
        }).finally(() => {
          this.$emit('ok')
          this.confirmLoading = false
          this.close()
        })
      },


      //拼接页面
      dohtml(list) {
        let html = ''
        list.forEach((item, index) => {
          if (index % 2 == 0) {
            html += '<tr>'
          }
          html += '<td style="width:100px;text-align: right;padding-top: 10px;">' + item.NAME_ + ':</td>'
          let a=item.TEXT_== null?'':item.TEXT_
          html += '<td style="width:300px;padding-top: 10px;">' + a + '</td>'
          if (index % 2 == 1||list.length-1==index) {
            html += '</tr>'
          }
        })
        this.doHtml = html

      },

      //是否显示文件列表
      showFile(list){

        list.forEach((item, index) => {
          if(item.NAME_=='id'){
            this.fkId=item.TEXT_
          }
          if(item.NAME_=='单证类型'&&item.TEXT_=='盖章申请'){
            this.fileShow=true
            this.$refs.localFile.fk=this.fkId
            this.$refs.localFile.sd(this.fkId,false)
          }

        })
      },


      delCheckFun(callback) {
        let result = this.fkId
        //业务逻辑代码...
        callback(result) // 执行作为参数的函数，注意：callback(true)写法，要赋值给变量result
      }

    }
  }
</script>

<style lang="less"  scoped>
  table
  {
    border-collapse: collapse;
    margin: 0;
    padding: 0;
    text-align: left;
  }
  table td, table th
  {
    // border: 1px solid #cad9ea;
    color: #666;
    height: 48px;
  }
  table thead th
  {
    background-color: #CCE8EB;
    width: 100px;
  }
  // table tr:nth-child(odd)
  // {
  //   background: #fff;
  // }
  // table tr:nth-child(even)
  // {
  //   background: #F5FAFA;
  // }

</style>